<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!--login_register.css-->
    <link href="css/login_register.css" rel="stylesheet"/>

</head>
<body>
    <div class="container">
        <!--tab-->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#login" aria-controls="login" role="tab" data-toggle="tab">登录</a></li>
            <li role="presentation"><a href="#sign_up" aria-controls="sign_up" role="tab" data-toggle="tab">注册</a></li>
        </ul>
        <!--tab-content-->
        <div class="tab-content">
            <!--login-->
            <div role="tabpanel" class="tab-pane fade in active" id="login">
                <div th:if="${param.registerSuccess}" class="text-center">
                    <p  class="alert alert-success text-align" role="alert">注册成功，请登录</p>
                </div>
                <div th:if="${param.registerError}"  class="text-center">
                    <p  class="alert alert-danger text-align" role="alert">注册失败，请重新注册</p>
                </div>
                <div class="col-md-offset-3 col-md-9 col-xs-12">
                    <form class="form-horizontal" id="login_form" th:action="@{/login_register}" method="post">
                        <div class="row">
                            <h2 class="col-sm-offset-2 col-sm-4 text-center">登录</h2>
                            <div class="col-sm-6"></div>
                        </div>
                        <div class="form-group row" id="phone2_box">
                            <label for="phone2" class="control-label col-sm-2">手机号</label>
                            <div class="col-sm-4">
                                <input class="form-control" type="text" id="phone2" name="username" placeholder="请输入手机号" autocomplete="off"/>
                                <i class="glyphicon glyphicon-remove form-control-feedback" id="phone2_f"></i>
                                <i class="glyphicon glyphicon-ok form-control-feedback" id="phone2_t"></i>
                            </div>
                            <div class="col-sm-6">
                                <span class="help-block " id="phone2_null">手机号不能为空</span>
                                <span class="help-block " id="phone2_error">未找到该账号</span>
                            </div>
                        </div>
                        <div class="form-group row" id="psw3_box">
                            <label for="psw3" class="control-label col-sm-2">密码</label>
                            <div class="col-sm-4">
                                <input class="form-control" type="password" id="psw3" name="password" placeholder="请输入密码" autocomplete="off"/>
                                <i class="glyphicon glyphicon-remove form-control-feedback" id="psw3_f"></i>
                                <i class="glyphicon glyphicon-ok form-control-feedback" id="psw3_t"></i>
                            </div>
                            <div class="col-sm-6">
                                <span class="help-block " id="psw3_null">密码不能为空</span>
                                <span class="help-block " id="psw3_error">密码和账号不匹配</span>
                            </div>
                        </div>
                        <div class="form-group row" id="img_box">
                            <label for="img_code" class="control-label col-sm-2">图片验证码</label>
                            <div class="col-sm-2">
                                <input class="form-control" type="text" id="img_code" name="img_code" placeholder="不区分大小写" autocomplete="off"/>
                                <i class="glyphicon glyphicon-remove form-control-feedback" id="img_f"></i>
                                <i class="glyphicon glyphicon-ok form-control-feedback" id="img_t"></i>
                            </div>
                            <div class="col-sm-2">
                                <img src="/getKaptchaImage" alt="图片验证码" id="img"/>
                                <a href="javascript:;" class="fresh">看不清?换一张</a>
                            </div>
                            <div class="col-sm-6">
                                <span class="help-block " id="img_null">图片验证码不能为空</span>
                                <span class="help-block " id="img_error">图片验证码错误</span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-offset-2 col-sm-4 text-right">
                                <button type="button" name="submit2" class="btn btn-primary btn2" id="loginBtn">登录</button>
                            </div>
                            <div class="col-sm-6"></div>
                        </div>

                    </form>
                </div>
                <div th:if="${param.error}" class="col-md-12 text-center col-xs-12">
                    <p class="alert alert-danger text-align" role="alert">手机号或密码错误</p>
                </div>


            </div>

            <!--register-->
            <div role="tabpanel" class="tab-pane fade" id="sign_up">
                <div class="col-md-offset-3 col-md-9 col-xs-12">
                    <form class="form-horizontal" id="register_form" method="post" action="/register">
                        <div class="row">
                            <h2 class="col-sm-offset-2 text-center col-sm-5">注册</h2>
                            <div class="col-sm-5"></div>
                        </div>
                        <div class="form-group row" id="telephone1">
                            <label for="phone1" class="control-label col-sm-2">手机号码</label>
                            <div class="col-sm-5">
                                 <input class="form-control has-feedback" type="text" id="phone1" name="phone1" placeholder="请输入手机号码" autocomplete="off"/>
                                 <span class="glyphicon glyphicon-remove form-control-feedback" id="phone1_f"></span>
                                 <span class="glyphicon glyphicon-ok form-control-feedback" id="phone1_t"></span>
                            </div>
                            <div class="col-sm-5">
                                <span class="help-block" id="phone1_null">手机号码不能为空</span>
                                <span class="help-block" id="phone1_error">手机号码不正确</span>
                                <span class="help-block" id="phone1-existed">该手机号已经注册！请直接登录</span>
                            </div>
                        </div>
                        <div class="form-group row" id="msg_box">
                            <label for="msg_code" class="control-label col-sm-2">短信验证码</label>
                            <div class="col-sm-3">
                                <input class="form-control" type="text" id="msg_code" name="msg_code" placeholder="请输入短信验证码" autocomplete="off"/>
                                <span class="glyphicon glyphicon-remove form-control-feedback" id="msg_f"></span>
                                <span class="glyphicon glyphicon-ok form-control-feedback" id="msg_t"></span>
                            </div>
                            <div class="col-sm-2">
                                <button type="button" href="#" class="btn btn-primary" id="msg_btn">获取验证码</button>
                            </div>
                            <div class="col-sm-5">
                                <span class="help-block" id="msg_null">短信验证码不能为空</span>
                                <span class="help-block" id="msg_error">短信验证码错误</span>
                            </div>
                        </div>
                        <div class="form-group row" id="name_box">
                            <label for="myName" class="control-label col-sm-2">昵称</label>
                            <div class="col-sm-5">
                                <input class="form-control" type="text" id="myName" name="myName" placeholder="请输入昵称，至少2个字符，至多20个" autocomplete="off"/>
                                <i class="glyphicon glyphicon-remove form-control-feedback" id="name_f"></i>
                                <i class="glyphicon glyphicon-ok form-control-feedback" id="name_t"></i>
                            </div>
                            <div class="col-sm-5">
                                <span class="help-block " id="name_null">昵称不能为空</span>
                                <span class="help-block " id="name_error">昵称至少2个字符，至多20个</span>
                            </div>
                        </div>
                        <div class="form-group row" id="psw1_box">
                            <label for="psw1" class="control-label col-sm-2">密码</label>
                            <div class="col-sm-5">
                                <input class="form-control psw" type="password" id="psw1" name="psw1" placeholder="至少6位，字母或特殊符号和数字结合" autocomplete="off"/>
                                <i class="glyphicon glyphicon-remove form-control-feedback" id="psw1_f"></i>
                                <i class="glyphicon glyphicon-ok form-control-feedback" id="psw1_t"></i>
                            </div>
                            <div class="col-sm-5">
                                <span class="help-block " id="psw1_null">密码不能为空</span>
                                <span class="help-block " id="psw1_error">至少六位,字母或特殊符号和数字结合</span>
                            </div>
                        </div>
                        <div class="form-group row" id="psw2_box">
                            <label for="psw2" class="control-label col-sm-2">确认密码</label>
                            <div class="col-sm-5">
                                <input class="form-control psw" type="password" id="psw2" name="psw2" placeholder="请再次输入密码" autocomplete="off"/>
                                <i class="glyphicon glyphicon-remove form-control-feedback" id="psw2_f"></i>
                                <i class="glyphicon glyphicon-ok form-control-feedback" id="psw2_t"></i>
                            </div>
                            <div class="col-sm-5">
                                <span class="help-block " id="psw2_null">确认密码不能为空</span>
                                <span class="help-block " id="psw2_error">确认密码必须和密码一致</span>
                            </div>
                        </div>
                        <div class="form-group row" id="gender">
                            <div class=" col-sm-offset-2 col-sm-6">
                                <label class="radio-inline">
                                    <input class="form-control" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="gentleman" checked>男士
                                </label>
                                <label class="radio-inline">
                                    <input class="form-control" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="lady">女士
                                </label>
                            </div>
                            <div class="col-sm-4"></div>
                        </div>
                        <div class="from-group row" id="checkbox">
                            <div class="checkbox col-sm-offset-2 col-sm-6">
                                <label>
                                    <input class="form-control" type="checkbox" name="checkbox" id="check_box" required/>已阅读并同意<a href="#">服务条款</a>
                                </label>
                            </div>
                            <div class="col-sm-4"></div>
                        </div>
                        <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
                        <div class="form-group row" id="submit">
                            <div class="col-sm-offset-2 col-sm-5 text-right">
                                <button type="button" name="submit1" class="btn btn-primary btn1" id="registerBtn">注册</button>
                            </div>
                            <div class="col-sm-5"></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="foot">
        <p class="text-center">Copyright &copy; 2018 智能外包管理平台. All Rights Reserved | Design by <span>杨玉卿&张海洋&田宇</span></p>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--jquery:cookie-->
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
    <!--js-->
    <script src="js/login_validate.js"></script>



</body>
</html>